<template>
  <div class="evaluate">
    <van-notice-bar
      left-icon="volume-o"
      text="身份证正反面为必填项，学生证或者校园一卡通二选一填写"
    />
    <van-divider contentPosition="left" >身份证正反面</van-divider>
    <div>身份证正面</div>
    <div>身份证反面</div>
      <span v-for="(item,index) in fileList" class="picture" @click="chooseImage(index)">
      <img  v-if="item.isImage"  :src="item.imgSrc" class="icon-2"/>
      <img  v-if="item.isCion"  :src="item.cionSrc" class="icon-1"/>
    </span>
    <van-divider contentPosition="left" >学生证（校园一卡通）(二选一)</van-divider>
    <div>学生证</div>
    <div>校园一卡通</div>
    <span v-for="(item,index) in fileList" class="picture" @click="chooseImage(index)">
      <img  v-if="item.isImage"  :src="item.imgSrc" class="icon-2"/>
      <img  v-if="item.isCion"  :src="item.cionSrc" class="icon-1"/>
    </span>
    <van-submit-bar
      button-text="提交实名认证"
      @submit="onSubmit"
      button-type="info"
      currency=" "></van-submit-bar>
  </div>
</template>

<script>


export default {
  data () {
    return {
      fileList: [{
        isCion: true,
        isImage: false,
        cionSrc: "/static/images/icon/id_zheng.png",
        imgSrc: ""
      },
        {
          isCion: true,
          isImage: false,
          cionSrc: "/static/images/icon/id_fan.png",
          imgSrc: ""
        }]
      }
    },
  methods: {
    chooseImage (index) {
      var that = this;
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: function (res) {
          // console.log(res)
          wx.showToast({
            title: '正在上传',
            icon: 'loading',
            mask: true,
            duration: 1000
          })
          var tempFilePaths = res.tempFilePaths
          that.fileList[index].imgSrc = tempFilePaths
          that.fileList[index].isCion = false
          that.fileList[index].isImage = true
          console.log(tempFilePaths)
        }
      })
    }
  }
  }



</script>

<style lang="stylus" rel="stylesheet/stylus">
  .evaluate
    div
      display inline-block
      width 362rpx
      height 54rpx
      margin-left 8rpx
      text-align center
      line-height 54rpx
    .picture
      display inline-block
      height 225rpx
      width 350rpx
      border 1rpx solid rgb(199, 199, 199)
      margin 10rpx
      .icon-1
        display inline-block
        height 156rpx
        width 235rpx
        margin 32rpx 50rpx
      .icon-2
        display inline-block
        height 225rpx
        width 350rpx
        margin 0 0
        background-size cover
</style>
